<script setup lang="ts">
import { reactive, ref } from "vue";
import { Toast } from "vant";
import type { Ref } from "vue";
import type { KnowledgeList, KnowledgePage, KnowledgeParams } from "@/types/homeTypes/homeTypes.ts";
import KnowledgeCard from "@/views/home/components/knowledgeList/KnowledgeCard.vue";
import { fetchKnowledgeListAPI } from "@/api/homeApi/homeApi.ts";

const props = defineProps<{
   type: string
}>();


const knowledgeList: Ref<KnowledgeList> = ref<KnowledgeList>([]);
const total: Ref<number> = ref<number>(0);
const loading: Ref<boolean> = ref<boolean>(false);
const finished: Ref<boolean> = ref<boolean>(false);
const knowledgeParams = reactive<KnowledgeParams>(<KnowledgeParams>{
   type: props.type,
   current: 1,
   pageSize: 10,
});


const onLoad = async () => {
   try {
      const { data }: { data: KnowledgePage } = await fetchKnowledgeListAPI(knowledgeParams);
      knowledgeList.value.push(...data.rows);
      total.value = data.total;
      if (knowledgeList.value.length >= total.value) {
         finished.value = true;
      } else {
         knowledgeParams.current++;
      }
   } catch (error: any) {
      Toast.fail(error.message);
   } finally {
      loading.value = false;
   }
};

const followSuccess = () => {

}

</script>

<template>
   <div class="knowledge-list">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
         <KnowledgeCard v-for="(item) in knowledgeList" :key="item.id" :item="item" @followSuccess="followSuccess"></KnowledgeCard>
      </van-list>
   </div>
</template>

<style scoped lang="scss">
.knowledge-list {
   padding: 0 15px;
}
</style>
